import React, { Component } from 'react'




// https://www.infoq.cn/article/hMb0TSo_dDPpTNDPkmAr


// 1.2 用户登录
// 2. 登录功能
// ① 添加状态：username（账号） 和 password（密码）。
// ② 使用受控组件方式获取表单元素值。
// ③ 给 form 表单添加 onSubmit。
// ④ 创建方法 handleSubmit，实现表单提交。
// ⑤ 在方法中，通过 username 和 password 获取到账号和密码。
// ⑥ 使用 API 调用登录接口，将 username 和 password 作为参数。
// ⑦ 判断返回值 status 为 200 时，表示登录成功。
// ⑧ 登录成功后，将token 保存到本地存储中（hkzf_token）。
// ⑨ 返回登录前的页面。








// 使用 formik  进行表单验证
// - 安装： yarn add formik /  cnpm i  formik@1.5.7   --save   
// - 导入 withFormik，使用withFormit 高阶组件包裹Login组件
// - 为withFormit提供配置对象： mapPropsToValues / handleSubmit
// - 在Login组件中，通过props获取到values（表单元素值对象），handleSubmit，handleChange
// - 使用values提供的值，设置为表单元素的value，使用handleChange设置为表单元素的onChange
// - 使用handleSubmit设置为表单的onSubmit
// - 在handleSubmit中，通过values获取到表单元素值
// - 在handleSubmit中，完成登录逻辑


import { withFormik } from 'formik'




import { Toast, WhiteSpace, WingBlank } from 'antd-mobile';
// import { createForm } from 'rc-form';


import NavHeader from '../../components/NavHeader/NavHeader'


import styles from './index.module.css'

// 导入封装好的reqLogin 方法 
import { reqHotCity, reqLogin } from '../../utils/index'



class LoginIndex extends Component {


  constructor() {
    super()
    // this.state = {
    //   username: '',
    //   password: ''

    // }
  }

  // OnChangeUser=(e)=>{
  //     this.setState({
  //         username: e.target.value
  //       })

  // }


  // OnChangePwd=(e)=>{
  //     this.setState({
  //         password: e.target.value
  //       })


  // }


  //登录逻辑功能



  render() {

    console.log('this.props', this.props)

    const { values, handleSubmit, handleChange, errors,handleBlur,touched } = this.props

    console.log(errors)


    return (


      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>账号登录</NavHeader>
        <WhiteSpace size="xl" />

        {/* 登录表单 */}
        <WingBlank>
          <form onSubmit={handleSubmit}>
            <div className={styles.formItem}>
              <input
                className={styles.input}
                name="username"
                placeholder="请输入账号"
                value={values.username}
                onChange={handleChange}
                onBlur={handleBlur}


              />
              {errors.username && (<div style={{ color: 'red' }}> { errors.username}</div>)}

              {errors.userMessage && (<div style={{ color: 'red' }}> { errors.userMessage} </div>)}
            </div>
            {/* 长度为5到8位，只能出现数字、字母、下划线 */}
            {/* <div className={styles.error}>账号为必填项</div> */}
            <div className={styles.formItem}>
              <input
                className={styles.input}
                name="password"
                type="password"
                placeholder="请输入密码"
                value={values.password}
                onChange={handleChange}
                onBlur={handleBlur}

              />


              {errors.password && (<div style={{ color: 'red' }}> { errors.password}</div>)}

              {errors.pwdMessage && (<div style={{ color: 'red' }}> { errors.pwdMessage} </div>)}
            </div>
            {/* 长度为5到12位，只能出现数字、字母、下划线 */}
            {/* <div className={styles.error}>账号为必填项</div> */}
            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                登 录
                  </button>
            </div>
          </form>
          {/* <Flex className={styles.backHome}>
                <Flex.Item>
                  <Link to="/registe">还没有账号，去注册~</Link>
                </Flex.Item>
              </Flex> */}
        </WingBlank>
      </div>




    )
  }
}


// const BasicInputExampleWrapper = createForm()(LoginIndex);


// export default  BasicInputExampleWrapper



// export default  LoginIndex





// 使用formik




// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/




let LoginForMik = withFormik({

  // username  ,  password 对应的是input  name值 


  mapPropsToValues: () => ({ username: '', password: '' }),

  // data 里面有一个对象名字就叫props
  handleSubmit: async (value, { props }) => {
    console.log(value)  // 获取到的input 输入的值
    try {
      let res = await reqLogin(value)
      var { body, description, status } = res

      console.log(description)

      console.log(status)

      console.log(body)




    } catch (error) {

      console.log(error)

    }


    if (status != 200) {
      Toast.fail(description);


    } else {

      var token = body.token

      localStorage.setItem('hkzf_token', token)

      // console.log('props',data.props)

      // this.props.history.go(-1)
      // data.props.history.go(-1)
      props.history.go(-1)



    }





  },

    //  原生formik 进行表单验证 


  validate: (value, props) => {
    let errors = {}

    let { username, password } = value

    //验证非空
    if (!username) {
      errors.username = '用户名不能为空'
    }
    //验证正则 

    if (!REG_UNAME.test(username)) {
      errors.userMessage = '长度为5到8位，只能出现数字、字母、下划线'
    }





    if (!password) {
      errors.password = '用户名不能为空'
    }

    if (!REG_PWD.test(password)) {
      errors.pwdMessage = '长度为5到8位，只能出现数字、字母、下划线'
    }


    return errors;
  }








})(LoginIndex)


export default LoginForMik


